<template>
	<view class='topicdetail'>
		<view class='outview'>
			<view class='titlebox'>
				<image class='avatarimg' :src='picture.getImgUrl(userInfo.avatar) '></image>
				<view class='titlebox_right'>
					<view class='nickname'>{{userInfo.nickname}}</view>
					<view class='timescreen'>{{exceptioninfo.createtime}}</view>
				</view>
			</view>
			<view class='contentbox'>
				<view class='contetntitel'>{{exceptioninfo.info}}</view>
				<block v-for='(item,index) in exceptioninfo.images' :key='index'>
					<image :src='picture.getImgUrl(item)' class='issueimage' mode="aspectFit" @click="previewImage(index,exceptioninfo.images)"></image>
				</block>
			</view>
		</view>
		<view class='zombie'>
			<view class='itembox'>
				<image class='statusimg' v-if='exceptioninfo.is_like == 0' @click='zanclick'
				src='../../static/image/zcht_ico_dz_nor@2x.png'></image>
				<image class='statusimg'  v-else src='../../static/image/zcht_ico_dz_sel@2x.png' @click='zanclick'></image>
				<view class="zan_num">{{exceptioninfo.zan_nums}}</view>
			</view>
			<view class='itembox'>
				<image class='statusimg' src='../../static/image/zcht_ico_yd_nor@2x.png'></image>
				<view class="zan_num">{{exceptioninfo.read_nums}}</view>
			</view>
		</view>
			
		<view class='commentbox'>
			<view class="comment_title"><view class="comment_line"></view>网友评论({{commentlist.length}})</view>
			<block v-for='(item,index) in commentlist' :key='index'>
				<view class="item_comment">
					<view class='titlebox'>
						<image class='avatarimg' :src='picture.getImgUrl(item.user.avatar) '></image>
						<view class='titlebox_right'>
							<view class='nickname'>{{item.user.nickname}}</view>
							<view class='timescreen'>{{item.createtime}}</view>
						</view>
					</view>
					<!-- v-html="item.comment" -->
					<!-- <view class='contentcontent' >{{item.comment | filtericon}}</view> -->
					<rich-text :nodes="item.comment" ></rich-text>
				</view>
			</block>
		</view>
		<view class='replacebtn_box'></view>
		<view class="btm_box"  :class="popupLayerClass" @touchmove.stop.prevent="discard">
			<view class="input_box">
				<input type="text" v-model="textMsg" @focus="textareaFocus" placeholder="请输入评论内容"  placeholder-class="input_class"/>
				<view class='input_box_right'>
					<image class='addicon' src="../../static/image/zcht_ico_bq@2x.png" @click='chooseEmoji'></image>
					<view class="input_btn" @tap="sendText">发表</view>
				</view>
			</view>
		</view>
		<!-- 抽屉栏 -->
		<view class="popup-layer" :class="popupLayerClass" @touchmove.stop.prevent="discard">
			<!-- 表情 -->
			<swiper class="emoji-swiper" :class="{hidden:hideEmoji}" indicator-dots="true" duration="150">
				<swiper-item v-for="(page,pid) in emojiList" :key="pid">
					<view v-for="(em,eid) in page" :key="eid" @tap="addEmoji(em)">
						<image mode="widthFix" :src="'../../static/img/emoji/'+em.url"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import {talkread,
setZan,
talkcomment} from "@/api/index.js"
	export default{
		data(){
			return{
				
				textMsg:'',//输入框内容
				// 抽屉参数
				popupLayerClass:'',
				//表情定义
				hideEmoji:true,
				emojiList:[
					[{"url":"100.gif",alt:"[微笑]"},{"url":"101.gif",alt:"[伤心]"},{"url":"102.gif",alt:"[美女]"},{"url":"103.gif",alt:"[发呆]"},{"url":"104.gif",alt:"[墨镜]"},{"url":"105.gif",alt:"[哭]"},{"url":"106.gif",alt:"[羞]"},{"url":"107.gif",alt:"[哑]"},{"url":"108.gif",alt:"[睡]"},{"url":"109.gif",alt:"[哭]"},{"url":"110.gif",alt:"[囧]"},{"url":"111.gif",alt:"[怒]"},{"url":"112.gif",alt:"[调皮]"},{"url":"113.gif",alt:"[笑]"},{"url":"114.gif",alt:"[惊讶]"},{"url":"115.gif",alt:"[难过]"},{"url":"116.gif",alt:"[酷]"},{"url":"117.gif",alt:"[汗]"},{"url":"118.gif",alt:"[抓狂]"},{"url":"119.gif",alt:"[吐]"},{"url":"120.gif",alt:"[笑]"},{"url":"121.gif",alt:"[快乐]"},{"url":"122.gif",alt:"[奇]"},{"url":"123.gif",alt:"[傲]"}],
					[{"url":"124.gif",alt:"[饿]"},{"url":"125.gif",alt:"[累]"},{"url":"126.gif",alt:"[吓]"},{"url":"127.gif",alt:"[汗]"},{"url":"128.gif",alt:"[高兴]"},{"url":"129.gif",alt:"[闲]"},{"url":"130.gif",alt:"[努力]"},{"url":"131.gif",alt:"[骂]"},{"url":"132.gif",alt:"[疑问]"},{"url":"133.gif",alt:"[秘密]"},{"url":"134.gif",alt:"[乱]"},{"url":"135.gif",alt:"[疯]"},{"url":"136.gif",alt:"[哀]"},{"url":"137.gif",alt:"[鬼]"},{"url":"138.gif",alt:"[打击]"},{"url":"139.gif",alt:"[bye]"},{"url":"140.gif",alt:"[汗]"},{"url":"141.gif",alt:"[抠]"},{"url":"142.gif",alt:"[鼓掌]"},{"url":"143.gif",alt:"[糟糕]"},{"url":"144.gif",alt:"[恶搞]"},{"url":"145.gif",alt:"[什么]"},{"url":"146.gif",alt:"[什么]"},{"url":"147.gif",alt:"[累]"}],
					[{"url":"148.gif",alt:"[看]"},{"url":"149.gif",alt:"[难过]"},{"url":"150.gif",alt:"[难过]"},{"url":"151.gif",alt:"[坏]"},{"url":"152.gif",alt:"[亲]"},{"url":"153.gif",alt:"[吓]"},{"url":"154.gif",alt:"[可怜]"},{"url":"155.gif",alt:"[刀]"},{"url":"156.gif",alt:"[水果]"},{"url":"157.gif",alt:"[酒]"},{"url":"158.gif",alt:"[篮球]"},{"url":"159.gif",alt:"[乒乓]"},{"url":"160.gif",alt:"[咖啡]"},{"url":"161.gif",alt:"[美食]"},{"url":"162.gif",alt:"[动物]"},{"url":"163.gif",alt:"[鲜花]"},{"url":"164.gif",alt:"[枯]"},{"url":"165.gif",alt:"[唇]"},{"url":"166.gif",alt:"[爱]"},{"url":"167.gif",alt:"[分手]"},{"url":"168.gif",alt:"[生日]"},{"url":"169.gif",alt:"[电]"},{"url":"170.gif",alt:"[炸弹]"},{"url":"171.gif",alt:"[刀子]"}],
					[{"url":"172.gif",alt:"[足球]"},{"url":"173.gif",alt:"[瓢虫]"},{"url":"174.gif",alt:"[翔]"},{"url":"175.gif",alt:"[月亮]"},{"url":"176.gif",alt:"[太阳]"},{"url":"177.gif",alt:"[礼物]"},{"url":"178.gif",alt:"[抱抱]"},{"url":"179.gif",alt:"[拇指]"},{"url":"180.gif",alt:"[贬低]"},{"url":"181.gif",alt:"[握手]"},{"url":"182.gif",alt:"[剪刀手]"},{"url":"183.gif",alt:"[抱拳]"},{"url":"184.gif",alt:"[勾引]"},{"url":"185.gif",alt:"[拳头]"},{"url":"186.gif",alt:"[小拇指]"},{"url":"187.gif",alt:"[拇指八]"},{"url":"188.gif",alt:"[食指]"},{"url":"189.gif",alt:"[ok]"},{"url":"190.gif",alt:"[情侣]"},{"url":"191.gif",alt:"[爱心]"},{"url":"192.gif",alt:"[蹦哒]"},{"url":"193.gif",alt:"[颤抖]"},{"url":"194.gif",alt:"[怄气]"},{"url":"195.gif",alt:"[跳舞]"}],
					[{"url":"196.gif",alt:"[发呆]"},{"url":"197.gif",alt:"[背着]"},{"url":"198.gif",alt:"[伸手]"},{"url":"199.gif",alt:"[耍帅]"},{"url":"200.png",alt:"[微笑]"},{"url":"201.png",alt:"[生病]"},{"url":"202.png",alt:"[哭泣]"},{"url":"203.png",alt:"[吐舌]"},{"url":"204.png",alt:"[迷糊]"},{"url":"205.png",alt:"[瞪眼]"},{"url":"206.png",alt:"[恐怖]"},{"url":"207.png",alt:"[忧愁]"},{"url":"208.png",alt:"[眨眉]"},{"url":"209.png",alt:"[闭眼]"},{"url":"210.png",alt:"[鄙视]"},{"url":"211.png",alt:"[阴暗]"},{"url":"212.png",alt:"[小鬼]"},{"url":"213.png",alt:"[礼物]"},{"url":"214.png",alt:"[拜佛]"},{"url":"215.png",alt:"[力量]"},{"url":"216.png",alt:"[金钱]"},{"url":"217.png",alt:"[蛋糕]"},{"url":"218.png",alt:"[彩带]"},{"url":"219.png",alt:"[礼物]"},]				
				],
				//表情图片图床名称 ，由于我上传的第三方图床名称会有改变，所以有此数据来做对应，您实际应用中应该不需要
				onlineEmoji:{"100.gif":"AbNQgA.gif","101.gif":"AbN3ut.gif","102.gif":"AbNM3d.gif","103.gif":"AbN8DP.gif","104.gif":"AbNljI.gif","105.gif":"AbNtUS.gif","106.gif":"AbNGHf.gif","107.gif":"AbNYE8.gif","108.gif":"AbNaCQ.gif","109.gif":"AbNN4g.gif","110.gif":"AbN0vn.gif","111.gif":"AbNd3j.gif","112.gif":"AbNsbV.gif","113.gif":"AbNwgs.gif","114.gif":"AbNrD0.gif","115.gif":"AbNDuq.gif","116.gif":"AbNg5F.gif","117.gif":"AbN6ET.gif","118.gif":"AbNcUU.gif","119.gif":"AbNRC4.gif","120.gif":"AbNhvR.gif","121.gif":"AbNf29.gif","122.gif":"AbNW8J.gif","123.gif":"AbNob6.gif","124.gif":"AbN5K1.gif","125.gif":"AbNHUO.gif","126.gif":"AbNIDx.gif","127.gif":"AbN7VK.gif","128.gif":"AbNb5D.gif","129.gif":"AbNX2d.gif","130.gif":"AbNLPe.gif","131.gif":"AbNjxA.gif","132.gif":"AbNO8H.gif","133.gif":"AbNxKI.gif","134.gif":"AbNzrt.gif","135.gif":"AbU9Vf.gif","136.gif":"AbUSqP.gif","137.gif":"AbUCa8.gif","138.gif":"AbUkGQ.gif","139.gif":"AbUFPg.gif","140.gif":"AbUPIS.gif","141.gif":"AbUZMn.gif","142.gif":"AbUExs.gif","143.gif":"AbUA2j.gif","144.gif":"AbUMIU.gif","145.gif":"AbUerq.gif","146.gif":"AbUKaT.gif","147.gif":"AbUmq0.gif","148.gif":"AbUuZV.gif","149.gif":"AbUliF.gif","150.gif":"AbU1G4.gif","151.gif":"AbU8z9.gif","152.gif":"AbU3RJ.gif","153.gif":"AbUYs1.gif","154.gif":"AbUJMR.gif","155.gif":"AbUadK.gif","156.gif":"AbUtqx.gif","157.gif":"AbUUZ6.gif","158.gif":"AbUBJe.gif","159.gif":"AbUdIO.gif","160.gif":"AbU0iD.gif","161.gif":"AbUrzd.gif","162.gif":"AbUDRH.gif","163.gif":"AbUyQA.gif","164.gif":"AbUWo8.gif","165.gif":"AbU6sI.gif","166.gif":"AbU2eP.gif","167.gif":"AbUcLt.gif","168.gif":"AbU4Jg.gif","169.gif":"AbURdf.gif","170.gif":"AbUhFS.gif","171.gif":"AbU5WQ.gif","172.gif":"AbULwV.gif","173.gif":"AbUIzj.gif","174.gif":"AbUTQs.gif","175.gif":"AbU7yn.gif","176.gif":"AbUqe0.gif","177.gif":"AbUHLq.gif","178.gif":"AbUOoT.gif","179.gif":"AbUvYF.gif","180.gif":"AbUjFU.gif","181.gif":"AbaSSJ.gif","182.gif":"AbUxW4.gif","183.gif":"AbaCO1.gif","184.gif":"Abapl9.gif","185.gif":"Aba9yR.gif","186.gif":"AbaFw6.gif","187.gif":"Abaiex.gif","188.gif":"AbakTK.gif","189.gif":"AbaZfe.png","190.gif":"AbaEFO.gif","191.gif":"AbaVYD.gif","192.gif":"AbamSH.gif","193.gif":"AbaKOI.gif","194.gif":"Abanld.gif","195.gif":"Abau6A.gif","196.gif":"AbaQmt.gif","197.gif":"Abal0P.gif","198.gif":"AbatpQ.gif","199.gif":"Aba1Tf.gif","200.png":"Aba8k8.png","201.png":"AbaGtS.png","202.png":"AbaJfg.png","203.png":"AbaNlj.png","204.png":"Abawmq.png","205.png":"AbaU6s.png","206.png":"AbaaXn.png","207.png":"Aba000.png","208.png":"AbarkT.png","209.png":"AbastU.png","210.png":"AbaB7V.png","211.png":"Abafn1.png","212.png":"Abacp4.png","213.png":"AbayhF.png","214.png":"Abag1J.png","215.png":"Aba2c9.png","216.png":"AbaRXR.png","217.png":"Aba476.png","218.png":"Abah0x.png","219.png":"Abdg58.png"},
			
			id:'',
			page:1,
			limit:10,
			commentlist:[],
			exceptioninfo:'',
			userInfo:[]
			}
			
		},
		onLoad(option) {
			this.id = option.id
			this._getexceptiondetail()
		},
		filters:{
			// filtericon(content){
			// 	// console.log(content)
			// 	// 怎么将字符串中的[]里面内容和[]都一起替换
			// 	console.log(content.replace(/[*]/g, "W3School"),2345) 
			// 	return 1
			// }
		},
		methods:{
			// 多图预览
			previewImage(indexImg, photoImg) {
				var that=this
			   let photoList = photoImg.map(item => {
			        let newImg = this.picture.getImgUrl(item)
			    return newImg;
			      }); 
				  //  这一步是为了给每一条图片数据，添加 'data:image/jpeg;base64,'。如果你的图片数据是完整的base64。此条步骤可以省略
			   uni.previewImage({
			    current: indexImg,
			    urls: photoList
			   });
			  },
			_getexceptiondetail(){
				let obj = {
					id:this.id,
					page:this.page,
					limit:this.limit
				}
				talkread(obj).then(res=>{
					if(res.code == 1){
						this.exceptioninfo = res.data.info
						this.userInfo=this.exceptioninfo.user
						if(this.page == 1){
							this.commentlist = res.data.comment
							
							// 接收数据时处理文字,变成icon图标标签渲染
							let len = this.commentlist.length
							for(let i = 0; i < len; i++){
								this.commentlist[i].comment = this.replaceEmoji(this.commentlist[i].comment)
							}
							console.log(this.commentlist,'处理后的数据');
						}else{
							this.commentlist =this.commentlist.concat(res.data.comment) 
						}
					}else{
						this.$msg(res.msg)
					}
				})
			},
			zanclick(){
				let obj = {
					talk_id:this.id
				}
				setZan(obj).then(res=>{
					if(res.code == 1){
						this._getexceptiondetail()
						this.$msg(res.msg)
					}else{
						this.$msg(res.msg)
					}
				})
			},
			
			//获取焦点，说明不是选表情ing,则关闭抽屉
			textareaFocus(){
				if(this.popupLayerClass=='showLayer' && this.hideMore == false){
					this.hideDrawer();
				}
			},
			discard(){
				return;
			},
			// 打开抽屉
			openDrawer(){
				this.popupLayerClass = 'showLayer';
			},
			// 隐藏抽屉
			hideDrawer(){
				this.popupLayerClass = '';
				setTimeout(()=>{
					this.hideEmoji = true;
				},150);
			},
			// 选择表情
			chooseEmoji(){
				if(this.hideEmoji){
					this.hideEmoji = false;
					this.openDrawer();
				}else{
					this.hideDrawer();
				}
			},
			//添加表情
			addEmoji(em){
				let content = this.replaceEmoji(em.alt);//将选择图标转换成网路图片路径
				this.textMsg +=em.alt;//让输入框显示选中几个图标
			},
			
			// 发送文字消息
			sendText(){
				this.hideDrawer();//隐藏抽屉
				if(!this.textMsg){
					return;
				}
				let obj = {
					user_talk_id:this.id,
					comment: this.textMsg
				}
				talkcomment(obj).then(res=>{
					if(res.code == 1){
						this._getexceptiondetail()
					}else{
						this.$msg(res.msg)
					}
				})
				this.textMsg = '';//清空输入框
			},
			
			//替换表情符号为图片，把表情改为图片
			replaceEmoji(str){
				// console.log(str,'输入文字不是表情文字还替换？')
				var that = this
				let replacedStr = str.replace(/\[([^(\]|\[)]*)\]/g,(item, index)=>{
					console.log("item: " + item);
					for(let i=0;i<this.emojiList.length;i++){
						let row = this.emojiList[i];//得到表情第一个也数组
						for(let j=0;j<row.length;j++){
							let EM = row[j];
							if(EM.alt==item){//进入这里表示文字和表情图标text一直，转化成表情图标
								that.iconadd = true
								//在线表情路径，图文混排必须使用网络路径，请上传一份表情到你的服务器后再替换此路径 
								//比如你上传服务器后，你的100.gif路径为https://www.xxx.com/emoji/100.gif 则替换onlinePath填写为https://www.xxx.com/emoji/
								let onlinePath = 'https://s2.ax1x.com/2019/04/12/'
								let imgstr = '<img src="'+onlinePath+this.onlineEmoji[EM.url]+'">';
								// console.log("imgstr: " + imgstr);
								
								
								// 返回路径,不返回标签,方便渲染
								// let OnlineEmojiUrl = onlinePath+this.onlineEmoji[EM.url]
								return imgstr;
								// return OnlineEmojiUrl;
							}
						}
					}
				});
				// console.log(replacedStr,'文字不和表情文字一样应不该不会变成iamge标签')
				// return '<div style="display: flex;align-items: center;word-wrap:break-word;">'+replacedStr+'</div>';
				return replacedStr
			},
		}
	}
</script>

<style lang="scss">
	@import "@/static/HM-chat/css/style.scss";
	.iconimg{//这里单独给聊天表情包样式
		height:40rpx;
		width:40rpx;
	}
	
	
	.topicdetail{
		width:100%;
		height:100vh;
		background-color: #F5F5F5;
		padding-top: 20rpx;
	}
	.outview{
		height:auto;
		width:100%;
		padding:30rpx 30rpx 0;
		background-color: #FFFFFF;
	}
	.titlebox{
		display: flex;
		justify-content: flex-start;
		width:100%;
		height:auto;
	}
	.avatarimg{
		height:70rpx;
		width:70rpx;
		border-radius: 50%;
	}
	.titlebox_right{
		margin-left: 20rpx;
		height:70rpx;
		width:auto;
		/* border:1rpx solid red; */
		display: flex;
		/* align-items: ; */
		flex-direction: column;
		justify-content: space-around;
	}
	.nickname{
		height:30rpx;
		font-size: 30rpx;
		line-height: 30rpx;
		width:300rpx;
	}
	.timescreen{
		height: 30rpx;
		line-height: 30rpx;
		width:300rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
	}
	.contentcontent{
		margin:10rpx 0rpx 20rpx;
	}
	.contentbox{
		// border:1rpx solid red;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-bottom: 15rpx;
	}
	.contetntitel{
		width:100%;
		height:auto;
		padding-top: 20rpx;
		padding-bottom: 10rpx;
	}
	.issueimage{
		// width:auto;
		// height:auto;
		// margin:0 auto;
	}
	
	.zombie{
		height:130rpx;
		width:100%;
		display: flex;
		padding: 0 50rpx;
		justify-content: flex-end;
		align-items: center;
		background-color: #FFFFFF;
		/* border:1rpx solid red; */
		padding-bottom: 15rpx;
	}
	.itembox{
		height:100rpx;
		width:auto;
		/* border:1rpx solid red; */
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		margin-left: 60rpx;
	}
	.statusimg{
		width:42rpx;
		height:40rpx;
	}
	
	
	.commentbox{
		width:100%;
		background-color: #FFFFFF;
		margin-top: 20rpx;
		height:auto;
		padding: 0rpx 30rpx;
		padding-top: 30rpx;
		padding-bottom: 10rpx;
	}
	.comment_title{
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-bottom: 29rpx;
	}
	.comment_line{
		width: 4rpx;
		height: 20rpx;
		background: #FFDD47;
		border-radius: 2rpx;
		margin-right: 10rpx;
	}
	.item_comment{
		// border:1rpx solid red;
		padding: 10rpx 0;
	}
	
	
	.input_box{
		width: 100%;
		height: 58rpx;
		background: #F5F5F5;
		border-radius: 10rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	input{
		width: 464rpx;
		height: 100%;
		padding: 0 21rpx;
		font-size: 26rpx;
	}
	.input_class{
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
	}
	.input_box_right{
		width:auto;
		height:100%;
		display: flex;
		align-items: center;
		
	}
	.addicon{
		width:36rpx;
		height:36rpx;
		margin-right: 20rpx;
	}
	.input_btn{
		width: 140rpx;
		height: 58rpx;
		background: linear-gradient(126deg, #FFDD47, #FCB630);
		border-radius: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}
	
	
	.replacebtn_box{//代替input位置
		min-height: 100upx;
		width:100%;
	}
	.zan_num{
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
	}
</style>
